<template>
  <div>
    <h1>App</h1>
    <p>firstName为：{{ firstName }}</p>
    <p>lastName为：{{ lastName }}</p>
    <p>fullName为：{{ fullName }}</p>
    <button @click="changeName">changeName</button>
    <button @click="changeFullName">changeFullName</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('张')
const lastName = ref('三')

// const fullName = computed(() => {
//   return firstName.value + lastName.value
// })

const changeName = () => {
  firstName.value = '李'
  lastName.value = '四'
}

const fullName = computed({
  get() {
    return firstName.value + lastName.value
  },
  set(newValue) {
    const names = newValue.split('-')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

const changeFullName = () => {
  fullName.value = '王-五'
}
</script>

<style lang="scss" scoped></style>
